const video = document.getElementById('video');    
const play = document.getElementById('play');     
const stop = document.getElementById('stop');     
const progress = document.getElementById('progress'); 
const timestamp = document.getElementById('timestamp'); 
function toggleVideoStatus() {
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
}
/**
 * 更新播放/暂停按钮图标状态
 * 根据视频的暂停状态切换显示播放 ▶️ 或暂停 ⏸ 图标
 */
function updatePlayIcon() {
    if (video.paused) {
        play.innerHTML = '<i class="fa fa-play fa-2x"></i>'; // 暂停状态显示播放图标
    } else {
        play.innerHTML = '<i class="fa fa-pause fa-2x"></i>'; // 播放状态显示暂停图标
    }
}

function updateProgress() {
    // Update progress bar (fixed missing * operator)
    progress.value = (video.currentTime / video.duration) * 100;

    // Calculate minutes (padded with zero)
    let mins = Math.floor(video.currentTime / 60);
    if (mins < 10) {
        mins = '0' + mins; // Removed unnecessary String()
    }

    // Calculate seconds (padded with zero)
    let secs = Math.floor(video.currentTime % 60);
    if (secs < 10) {
        secs = '0' + secs; // Removed unnecessary String()
    }

    // Update timestamp display (fixed template literal syntax)
    timestamp.innerHTML = `${mins}:${secs}`;
}

// 通过进度条设置视频播放时间
function setVideoProgress() {
    video.currentTime = (+progress.value * video.duration) / 100;  // 转换为秒数
}

// 停止并重置视频
function stopVideo() {
    video.currentTime = 0;  // 重置到开头
    video.pause();         // 暂停播放
}

video.addEventListener('click', toggleVideoStatus);    
video.addEventListener('pause', updatePlayIcon);       
video.addEventListener('play', updatePlayIcon);       
video.addEventListener('timeupdate', updateProgress);  

play.addEventListener('click', toggleVideoStatus);     
stop.addEventListener('click', stopVideo);             
progress.addEventListener('change', setVideoProgress); 